<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>index</title>
	<!-- 一些简单样式 -->
	<link rel="stylesheet" href="../commonCode/common.css">
	<link rel="stylesheet" href="css/index.css">
	<!-- jq -->
	<script src='../commonCode/jquery-3.3.1.js'></script>
	<!-- jq插件式写法 -->
	<script src='js/index.js'></script>
</head>
<body>
	<h3>组件库示例</h3>
	<!-- 仿站酷图片查看 点击放大 点击关闭 左右切换 esc缩小关闭 -->
	<h4>仿站酷图片查看 点击放大 点击关闭 左右切换 esc缩小关闭</h4>
	<div class='wrap'>
		<ul class='flex'>
			<li><img class='valued' src="img/1.jpg" alt=""></li>
			<li><img class='valued' src="img/2.jpg" alt=""></li>
			<li><img class='valued' src="img/3.jpg" alt=""></li>
			<li><img src="" alt=""></li>
			<li><img class='valued' src="img/4.jpg" alt=""></li>
			<li><img src="" alt=""></li>
			<li><img class='valued' src="img/5.jpg" alt=""></li>
			<li><img class='valued' src="img/6.jpg" alt=""></li>
		</ul>
	</div>		
	<!-- tab -->
	<h4>tab</h4>
	<div class='flex'>
		<span class='span on'>111</span>
		<span class='span'>112</span>
		<span class='span'>113</span>
		<span class='span'>114</span>
	</div>
	<div>
		<div class='div on'>111</div>
		<div class='div'>112</div>
		<div class='div'>113</div>
		<div class='div'>114</div>
	</div>
	<!-- nav底线移动 -->
	<h4>nav底线移动</h4>
	<div class='h'>
		<div class='flex jc-c wrap'>
			<span class='item on'>111</span>
			<span class='item'>112</span>
			<span class='item'>113</span>
			<span class='item'>114</span>			
		</div>
	</div>
	<!-- slide -->
	<h4>slide</h4>
	<div class='slide'>
		<div class='show'>
			<div class='wrap clearfix'>
				<div class='slideItem'>1</div>
				<div class='slideItem'>2</div>
				<div class='slideItem'>3</div>
				<div class='slideItem'>4</div>
				<div class='slideItem'>5</div>
				<div class='slideItem'>6</div>
				<div class='slideItem'>7</div>
				<div class='slideItem'>8</div>
				<div class='slideItem'>9</div>
				<div class='slideItem'>10</div>
			</div>			
		</div>
		<!-- 左右按钮区 -->		
	</div>	
	<!-- Five star evaluation -->
	<h4>Five star evaluation</h4>
	<div class="stars0">
	    <ul class='flex'>
	        <li class='stars0Li'>
	        	<span></span>
	        </li>
	       	<li class='stars0Li'>
	        	<span></span>
	        </li>
	        <li class='stars0Li'>
	        	<span></span>
	        </li>
	        <li class='stars0Li'>
	        	<span></span>
	        </li>
	        <li class='stars0Li'>
	        	<span></span>
	        </li>
	    </ul>	   
	</div>	
	<!-- drag -->
	<h4>drag</h4>
	<div class='dragWrap'>
		<div class='drag'></div>
	</div>
</body>
</html>

